﻿<div>
    <MCard Class="mb-4">
        <MCardText>
            <MSelect @bind-Value="Steps"
                     Items="_items"
                     ItemValue="v=>v"
                     ItemText="v=>v.ToString()"
                     Label="# of steps"></MSelect>
        </MCardText>
    </MCard>
    <MStepper @bind-Value="_el">
        <MStepperHeader>

            @for (var n = 1; n <= Steps; n++)
            {
                var i = n;
                <MStepperStep Complete="_el > i"
                          Step="i"
                          Editable>
                    Step @i
                </MStepperStep>

                @if (i != Steps)
                {
                    <MDivider></MDivider>
                }
            }
        </MStepperHeader>

        <MStepperItems>
            @for (var n = 1; n <= Steps; n++)
            {
                var i = n;
                <MStepperContent Step="i">
                    <MCard Class="mb-12"
                       Color="grey lighten-1"
                       Height="200">
                    </MCard>

                    <MButton Color="primary"
                         OnClick="()=>NextStep(i)">
                        Continue
                    </MButton>

                    <MButton Text>
                        Cancel
                    </MButton>
                </MStepperContent>
            }
        </MStepperItems>
    </MStepper>
</div>

@code {
    private List<int> _items = new List<int> { 2, 3, 4, 5, 6 };
    private int _el = 1;
    private int _steps = 2;
    protected int Steps
    {
        get
        {
            return _steps;
        }
        set
        {
            if (_el > value)
            {
                _el = value;
            }
            _steps = value;
        }
    }

    private void NextStep(int step)
    {
        if (step == Steps)
        {
            _el = 1;
        }
        else
        {
            _el = step + 1;
        }
    }
}